<template>
    <div>
        <div class="order-container" v-for="(item,index) in listData" :key="index">
            <div class="order-content">
                <div class="order-header">
                    <span>{{item.oid}}</span>
                    <div class="btn-commit">
                        <span @click="Receive(item.oid,status,item.status)">
                            {{item.status===1?'确认收货':'已完成'}}
                        </span>
                        <van-icon name="delete" class="btn-del" size="23"
                            @click="removOrder(item.oid,status,item.status)" />
                    </div>
                </div>
                <div class="order-item">
                    <img :src="item.smallImg" alt="item.name">
                    <div class="order-info">
                        <div><span class="name">{{item.name}}</span>{{item.rule}}</div>
                        <div>{{item.enname}}</div>
                        <div><span class="price">￥{{item.price}}</span><span class="count">x{{item.count}}</span>
                        </div>
                    </div>
                </div>

                <div class="total-price">
                    <div>共计{{item.count}}件商品</div>
                    <div class="pricetotal">合计 ￥{{item.price*item.count}}</div>
                    <div class="circular left"></div>
                    <div class="circular right"></div>
                </div>
                <div class="footer">{{item.updatedAt}}</div>
            </div>
        </div>
    </div>

</template>
<script>
    export default {
        name: 'OrderList',
        props: ['data', 'status'],
        methods: {

            Receive(oid, status, thisStatus) {
                if (thisStatus === 1) {
                    this.$dialog.confirm({
                            title: '确认收货',
                            message: '是否确认收货',
                        })
                        .then(() => {
                            // on confirm
                            this.$emit('confirm-receive', oid, status)
                        })
                        .catch(() => {
                            console.log('取消确认')
                        })
                }
            },
            removOrder(oid, status, thisStatus) {
                this.$dialog.confirm({
                        title: '删除',
                        message: '是否删除订单',
                    })
                    .then(() => {
                        // on confirm
                        console.log(oid, status, thisStatus);
                        this.$emit('del-order', oid, status)
                    })
                    .catch(() => {
                        console.log('取消确认')
                    })
            }
        },
        computed: {
            listData() {
                return this.data;
            }
        },
    }
</script>